<template>
  <div>
    <div
      class="box-header"
    >
      <el-row type="flex" justify="space-between" align="middle">
        <el-row
          class="site-name-container"
          type="flex"
          justify="start"
          align="middle"
        >
          <div style="margin-left: 15px"><img :src="logoImg"></div>
          <div class="site-name">{{ systemName }}</div>
        </el-row>
        <el-row
          class="site-user-container"
          type="flex"
          justify="end"
          align="middle"
        >
          <template>
            <screenfull id="screenfull" class="right-menu-item hover-effect" />
          </template>

          <el-dropdown
            class="menu-avatar-container right-menu-item"
            trigger="hover"
          >
            <div class="menu-avatar-wrapper hover-effect">
              <div class="menu-avatar-inner">
                {{ name }}
                <i class="el-icon-caret-bottom" />
              </div>
            </div>
            <el-dropdown-menu slot="dropdown" class="menu-dropdown">
              <el-dropdown-item @click.native="changePwd">
                <span style="display: block">修改密码</span>
              </el-dropdown-item>

              <el-dropdown-item divided @click.native="logout">
                <span style="display: block">退出登录</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-row>
      </el-row>
    </div>
    <div class="box-content">
      <div class="d-flex align-items-stretch">
        <div class="d-flex flex-column user-container">
          <div class="user-title">
            个人信息
          </div>
          <div class="d-flex flex-fill justify-content-start align-items-stretch user-detail-container">
            <div class="user-avatar" />
            <div class="d-flex flex-column justify-content-between align-items-start user-detail-list">
              <div class="user-welcome">
                <span>您好：</span>
                <span class="user-name">{{ name }}</span>
              </div>
              <div class="user-org">
                <span>机构：</span>
                <span>--</span>
              </div>
              <div class="user-last">
                <span>上次登录时间：</span>
                <span>{{ lastDateTime | formatDate }}</span>
              </div>
              <div class="user-action">
                <span>操作：</span>
                <a
                  href="/#/index"
                  class="btn btn-link shadow-none border-0"
                  target="_blank"
                >门户网站</a>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <a
                  href="javascript:void(0)"
                  class="btn btn-link shadow-none border-0"
                  @click="changePwd"
                >修改密码</a>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <a
                  href="javascript:void(0)"
                  class="btn btn-link shadow-none border-0"
                  @click="logout"
                >退出登录</a>
              </div>
            </div>
          </div>
        </div>
        <div class="d-flex flex-column todo-container">
          <div class="todo-title">
            消息提醒
          </div>
          <div class="d-flex flex-column flex-fill justify-content-start align-items-stretch todo-detail-container" />
        </div>
      </div>
      <div class="app-row-container">
        <div class="d-flex flex-column justify-content-start align-items-start app-row-title-container">
          <div class="app-row-title">平台业务</div>
          <div class="app-row-bottom" />
        </div>
        <div class="d-flex align-items-stretch app-row-content-container flex-wrap">
          <div
            v-for="(app, index) in appList"
            :key="index"
            class="app-module d-flex flex-column justify-content-between align-items-center app-box-container"
          >
            <div class="app-icon">
              <i :class="app.icon" />
            </div>
            <div class="app-title">{{ app.name }}</div>
            <div
              v-if="menuMap.has(app.id)"
              class="app-button"
              @click="gotToSys(app.component)"
            >进 入
            </div>
            <div
              v-if="!menuMap.has(app.id)"
              class="app-button buttun-disabled"
            >进 入
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="box-bottom"
    >
      主办单位： {{ copyright }}
    </div>
    <el-dialog
      title="修改密码"
      :visible="dialogModifyPasswordVisible"
      width="500px"
      center
      @close="handleModifyPasswordClose"
    >
      <el-form
        ref="modifyPasswordForm"
        :model="modifyPasswordForm"
        :rules="modifyPasswordRules"
      >
        <el-form-item prop="originalPassword" label="旧密码" label-width="80px">
          <el-input
            v-model="modifyPasswordForm.originalPassword"
            type="password"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item prop="newPassword" label="新密码" label-width="80px">
          <el-input
            v-model="modifyPasswordForm.newPassword"
            type="password"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item
          prop="confirmPassword"
          label="重复密码"
          label-width="80px"
        >
          <el-input
            v-model="modifyPasswordForm.confirmPassword"
            type="password"
            autocomplete="off"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleModifyPasswordClose">取 消</el-button>
        <el-button type="primary" @click="handleModifyPassword">
          确 定
        </el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
import { getApps } from '@/api/rest/user'
import Screenfull from '@/components/Screenfull/index.vue'
import { datetimeFormat } from '@/utils/formatdate'
import { copyright, title } from '@/settings'
import { elPasswordRule, elRequiredRule } from '@/utils/el-validator'

const initModifyPasswordForm = {
  originalPassword: null,
  newPassword: null,
  confirmPassword: null
}

export default {
  name: 'UnifiedDashboard',
  components: { Screenfull },
  filters: {
    formatDate(val) {
      if (val) {
        return datetimeFormat(val)
      }
    }
  },
  data() {
    const validateConfirmPassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.modifyPasswordForm.newPassword) {
        callback(new Error('两次输入密码不一致'))
      } else {
        callback()
      }
    }
    return {
      appList: [],
      logoImg: require('@/assets/module_images/logo.png'),
      menuMap: Map,
      systemName: title,
      copyright: copyright,
      dialogModifyPasswordVisible: false,
      modifyPasswordForm: { ...initModifyPasswordForm },
      modifyPasswordRules: {
        originalPassword: [elRequiredRule],
        newPassword: [elRequiredRule, elPasswordRule],
        confirmPassword: [elRequiredRule, { trigger: 'blur', validator: validateConfirmPassword }]
      }
    }
  },
  computed: {
    ...mapState({
      roleMap: (state) => state.user.roleMap,
      modifyPassword: (state) => state.user.modifyPassword
    }),
    ...mapGetters([
      'name',
      'lastDateTime',
      'menus'
    ]),
    modifyPasswordUrl() {
      return process.env.VUE_APP_BASE_API + '/api/oauth/user/modifyPassword'
    }
  },
  created() {
    getApps().then(res => {
      this.appList = res.data
      const menuList = this.menus
      this.menuMap = new Map(menuList.map(item => [item.id, item.id]))
    })
  },
  methods: {
    handleModifyPasswordClose() {
      this.dialogModifyPasswordVisible = false
      this.$store.dispatch('user/toggleModifyPassword', false)
      this.$refs.modifyPasswordForm.clearValidate()
      this.modifyPasswordForm = { ...initModifyPasswordForm }
    },
    handleModifyPassword() {
      this.$refs.modifyPasswordForm.validate(valid => {
        if (valid) {
          this.$store.dispatch('user/modifyPassword', this.modifyPasswordForm).then(resp => {
            this.$message({
              type: 'success',
              message: '密码修改成功',
              duration: 5 * 1000
            })
            this.$store.dispatch('user/toggleModifyPassword', false)
            this.dialogModifyPasswordVisible = false
          }).catch(() => {
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    changePwd() {
      this.dialogModifyPasswordVisible = true
    },
    async logout() {
      await this.$store.dispatch('user/logout')
      if (this.ssoLogin) {
        // 如果启用单点登录, 跳转OAuth单点登出
        if (window.localStorage) {
          // 保存如果登录回来后跳转路径
          window.localStorage.setItem(
            'x-platform-login-redirect',
            this.$route.fullPath
          )
        }
        window.location = process.env.VUE_APP_BASE_API + '/api/oauth/logout'
      } else {
        this.$router.push(`/login?redirect=${this.$route.fullPath}`)
      }
    },
    gotToSys(type) {
      const routeData = this.$router.resolve({
        path: type,
        query: {}
      })
      window.open(routeData.href, '_blank')
    }
  }
}
</script>
<style lang="scss" scoped>
.box-header {
  width: 100%;
  height: 5rem;
  text-align: center;
  margin: 0 auto;
  width: 1200px;
  padding-top: 1rem;
}

.box-content {
  width: 100%;
  margin: 0 auto;
  width: 1200px;
  margin-top: 2rem;
  padding-bottom: 10rem;
}

.box-bottom {
  background-color: #3D93CE;
  width: 100%;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  position: fixed;
  bottom: 0;
  left: 0;
}

.site-name-container {
  padding-left: 0px;
  margin-left: 0px;
  background-size: 120px;

  .site-name {
    font-size: 2.2rem;
    font-weight: bold;
    margin-left: 20px;
    color: #3D93CE;
    -webkit-clip: background;
    -webkit-background-clip: text;
    -webkit-text-fill-color: #3D93CE;
    -webkit-text-stroke-width: 0.3rem;
    -webkit-text-stroke-color: rgba(2, 61, 184, 0.01);
    /*filter: url(#extrude);*/
    text-shadow: .5rem .5rem .5rem rgba(2, 61, 184, 0.5);
    position: relative;
    letter-spacing: 1px;
  }

  .site-divide {
    width: 20px;
    text-align: center;
    font-size: 18px;
    color: #3D93CE;
  }

  .site-platform {
    font-size: 18px;
    color: #3D93CE;
  }
}

.menu-item {
  margin-right: 30px;
  color: #3D93CE;
  height: 40px;
  line-height: 40px;
  font-weight: bold;
  position: relative;
  cursor: pointer;
  transition: all 0.5s;
}

.menu-item-active {
  border-bottom: 5px solid #3D93CE;
}

.menu-item:before {
  height: 5px;
  background-color: #3D93CE;
  content: "";
  bottom: 0;
  left: 0;
  width: 0%;
  position: absolute;
  transition: all 0.5s;
}

/*.menu-item:hover::before{*/
/*  width: 100%;*/
/*}*/
.menu-item:hover {
  transform: scale(1.1);
  border-bottom: 5px solid #3D93CE;
}

.site-user-container {
  height: 100%;

  &:focus {
    outline: none;
  }

  .right-menu-item {
    color: #3D93CE;
  }

  .menu-app-container {
    margin-right: 30px;

    .menu-app-wrapper {
      display: inline-block;
      padding: 10px;
      border-radius: 10px;
      color: #f2f5f9;
      font-size: 16px;
      vertical-align: text-bottom;

      &.hover-effect {
        cursor: pointer;
        transition: background 0.3s;

        &:hover {
          background: #3D93CE;
        }
      }
    }

    .menu-app-inner {
      padding-left: 40px;
      height: 28px;
      line-height: 28px;
    }
  }

  .menu-avatar-container {
    margin-right: 30px;

    .menu-avatar-wrapper {
      display: inline-block;
      padding: 10px;
      border-radius: 10px;
      color: #f2f5f9;
      font-size: 16px;
      vertical-align: text-bottom;

      &.hover-effect {
        cursor: pointer;
        transition: background 0.3s;
        background: RGBA(65, 139, 202, .9);

        &:hover {
          background: #3D93CE;
        }
      }
    }

    .menu-avatar-inner {
      padding-left: 40px;
      height: 28px;
      line-height: 28px;
      background: url("~@/assets/layout_images/extra_header_icon_user.png") left center no-repeat;
    }
  }

  .right-menu-item {
    display: inline-block;
    padding: 0 8px;
    font-size: 18px;
    color: #3D93CE;
    vertical-align: text-bottom;

    &.hover-effect {
      cursor: pointer;
      transition: background 0.3s;

      &:hover {
        background: rgba(0, 0, 0, 0.025);
      }
    }
  }
}

.app-row-container {
  margin: 0.25rem 0 0.35rem 0;
  padding: 0 0.15rem;

  .app-row-title-container {
    border-bottom: 0.01rem solid #3D93CE;
  }

  .app-row-title {
    font-size: 1.8rem;
    font-weight: bold;
    color: #3D93CE;
  }

  .app-row-bottom {
    margin-top: 0.75rem;
    width: 10rem;
    height: 0.35rem;
    background-color: #3D93CE;
  }

  .app-row-content-container {
    margin-top: 1.25rem;
    display: flex;
    justify-content: flex-start;

    .app-module {
      -webkit-transition: all .3s ease;
      transition: all .3s ease;
      cursor: pointer;
    }

    .app-box-container {
      width: 28%;
      background-color: #ecf0f5;
      border-radius: 0.05rem;
      margin: 2.5%;

      i {
        font-size: 8rem;
        color: #1286D6;
      }

      .app-button {
        width: 96%;
        margin: 0 auto;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
        height: 2.8rem;
        font-size: 1rem;
        color: white;
        background-color: #3D93CE;
      }

      .app-button:hover {
        font-size: 1.2rem;
        -webkit-transition: all .3s ease;
        transition: all .3s ease;
        cursor: pointer;
      }

      .button-disabled {
        background-color: #909399;
      }
    }

    .app-box-container:hover {
      -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, .2);
      -moz-box-shadow: 0 4px 20px rgba(0, 0, 0, .2);
      box-shadow: 0 4px 20px rgba(0, 0, 0, .2);
    }

    .app-box-container:hover .app-title {
      font-size: 1.1rem;
      -webkit-transition: all .3s ease;
      transition: all .3s ease;
      cursor: pointer;
      color: #1286D6;
    }

    .app-box-container:hover .app-icon {
      transform: rotateY(180deg);
    }

    .app-box-container .app-10 {
      //background: url(../img/icon_app_10.png) center center no-repeat;
      background-size: contain;
    }

    .app-box-container .app-icon {
      width: 100%;
      height: 10rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .app-box-container .app-title {
      font-size: 1.2rem;
      font-weight: 400;
      color: #333333;
      text-align: center;
      margin: 1rem 0 1rem 0;
    }
  }
}

.user-container {
  flex: 1;
  padding: 1rem 0.5rem;
}

.todo-container {
  flex: 1;
  padding: 1rem 0.5rem;
}

.user-container .user-title {
  padding: .8rem 1rem;
  background-color: #418bca;
  border-radius: .5rem;
  font-size: 1rem;
  color: #ffffff;
  line-height: 1rem;
}

.user-detail-container {
  /*margin-top: 0.12rem;*/
  border-radius: .5rem;
  border: 0.1rem solid #e1e1e1;
}

.user-detail-container .user-avatar {
  margin: 1rem 1.5rem;
  width: 8rem;
  height: 8rem;
  background-image: url('~@/assets/module_images/avatar_default.png');
  background-size: cover;
}

.user-detail-list {
  font-size: 1rem;
  margin: 1rem 0;
  color: #333333;
  line-height: 2rem;
}

.user-detail-list .user-name {
  color: #418bca;
}

.user-detail-list span {
  vertical-align: middle;
}

.user-detail-list a, .user-detail-list a:visited, .user-detail-list a:hover, .user-detail-list a:focus {
  color: #418bca;
  padding: 0;
  font-size: 1rem;
  line-height: 1.5rem;
}

.todo-container .todo-title {
  padding: .8rem 1rem;
  background-color: #fe9d58;
  border-radius: .5rem;
  font-size: 1rem;
  color: #ffffff;
}

.todo-detail-container {
  /*margin-top: 0.12rem;*/
  border-radius: .5rem;
  border: 0.1rem solid #e1e1e1;
  padding: 0.2rem 0.15rem;
  font-size: 1rem;
  line-height: 2rem;
}

.todo-item-container {
  font-size: 0.18rem;
  color: #333333;
  margin-bottom: 0.05rem;
}

.todo-item-container .todo-item-title {
  padding-left: 0.15rem;
}

.todo-item-container .todo-item-title.badge-new {
}

.todo-item-container .todo-item-date {
  color: #999999;
  font-family: Monaco, monospace;
}

.flex-fill {
  -ms-flex: 1 1 auto !important;
  flex: 1 1 auto !important;
}

.d-flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.justify-content-start {
  justify-content: flex-start;
}

.align-items-start {
  align-items: start;
}

.flex-wrap {
  flex-wrap: wrap;
}

.align-items-stretch {
  -ms-flex-align: stretch !important;
  align-items: stretch !important;
}
</style>
